// 运行项目命令：npm run start

// 导入react和react-dom
// 创建react元素(虚拟DOM) -保存关键信息的JS对象
// 渲染react元素到页面中

import React from 'react';
//通过解构的方式解构出来createRoot
import { createRoot } from 'react-dom/client';

// 这是一个JSX的语法
// const title2 = <h1>Hello React！！！</h1>;

// React.createElement(标签，{属性名：属性值},标签的内容)
// 创建一个h1标签元素
// const title = React.createElement( 'h1', { id: 'box', className: 'test' }, 'Hello，World！！！' );
// 如果标签不需要任何属性, 可以使用null {}
const title = React.createElement('h1', null, 'Hello，World！！！');

// 这个是16.8以前版本写法
// ReactDom.render(title, document.getElementById('root'));

// 这是React18版本新出的挂载节点的方法
const root = createRoot(document.getElementById('root'));
root.render(title);
console.log('root----->', root);
